<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" th:with="title='Categories',active='category'">
<header th:replace="admin/fragments/header::headerFragment(${title},${active})"></header>

<body class="fixed-left">
    <div id="wrapper">
        <div th:replace="admin/fragments/header::header-body"></div>
        <div class="content-page">
            <div class="content">
                <div class="container">
                    <div class="row">
                        <div class="col-sm-12">
                            <h4 class="page-title">Categories/Tags</h4>
                        </div>
                        <div class="col-md-6">
                            <div class="panel panel-color panel-primary">
                                <div class="panel-heading">
                                    <h1 class="panel-title">Categories List</h1>
                                </div>
                                <div class="panel-body">
                                    <th:block th:each="c : ${categories}">
                                        <div class="btn-group m-b-10">
                                            <th:block th:if="${c.name == 'Default Category'}">
                                                <button type="button"
                                                    th:class="'btn btn-'+${adminCommons.rand_color()}+' waves-effect waves-light'">
                                                    <th:block th:text="${c.name}" />
                                                    <th:block th:text="' ('+${c.count}+')'" />
                                                </button>
                                            </th:block>
                                            <th:block th:unless="${c.name == 'Default Category'}">
                                                <button type="button"
                                                    th:class="'btn btn-'+${adminCommons.rand_color()}+' dropdown-toggle waves-effect waves-light'"
                                                    data-toggle="dropdown" aria-expanded="false">
                                                    <th:block th:text="${c.name}" />
                                                    <th:block th:text="' ('+${c.count}+')'" />
                                                    <span class="caret"></span>
                                                </button>
                                                <ul class="dropdown-menu" role="menu">
                                                    <li>
                                                        <a href="javascript:void(0)"
                                                            th:attr="mid=${c.mid},cname=${c.name}"
                                                            class="edit-category">Modify</a>
                                                    </li>
                                                    <li>
                                                        <a href="javascript:void(0)" th:attr="mid=${c.mid}"
                                                            class="del-category">Delete</a>
                                                    </li>
                                                </ul>
                                            </th:block>
                                        </div>
                                    </th:block>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="panel  panel-pink">
                                <div class="panel-heading">
                                    <h1 class="panel-title">Tags List</h1>
                                </div>
                                <div class="panel-body">
                                    <th:block th:each="c : ${tags}">
                                        <div class="btn-group m-b-10">
                                            <button type="button"
                                                th:class="'btn btn-'+${adminCommons.rand_color()}+' dropdown-toggle waves-effect waves-light'"
                                                data-toggle="dropdown" aria-expanded="false">
                                                <th:block th:text="${c.name}" />
                                                <th:block th:text="' ('+${c.count}+')'" />
                                                <span class="caret"></span>
                                            </button>
                                            <ul class="dropdown-menu" role="menu">
                                                <li>
                                                    <a href="javascript:void(0)" th:attr="mid=${c.mid}"
                                                        class="del-category">Delete</a>
                                                </li>
                                            </ul>
                                        </div>
                                    </th:block>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-12">
                            <div class="panel panel-default">
                                <div class="panel-body">
                                    <form id="cform" class="form-inline" role="form">
                                        <input type="hidden" id="mid" />
                                        <div class="form-group">
                                            <input type="text" class="form-control" id="cname"
                                                placeholder="Category Name" />
                                        </div>
                                        <button id="save-category-btn" type="button"
                                            class="btn btn-success waves-effect waves-light m-l-10">Save Category
                                        </button>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div th:replace="admin/fragments/footer :: footer-content"></div>
                </div>
            </div>
        </div>
    </div>
    <div th:replace="admin/fragments/footer :: footer"></div>
    <script type="text/javascript">
        /*<![CDATA[*/
        var tale = new $.tale();

        $('#save-category-btn').click(function () {
            var cname = $('#cform #cname').val();
            var mid = $('#cform #mid').val();
            if (cname && cname != '') {
                tale.post({
                    url: '/admin/category/save',
                    data: { mid: mid, cname: cname },
                    success: function (result) {
                        $('#cform #mid').val('');
                        $('#cform #cname').val('');
                        if (result && result.code == 'success') {
                            tale.alertOkAndReload('Category saved succefully!');
                        } else {
                            tale.alertError(result.msg || 'Category save failed!');
                        }
                    }
                });
            } else {
                tale.alertError("Null Category not allowed!");
                return false;
            }
        });

        $('.edit-category').click(function () {
            var mid = $(this).attr('mid');
            var cname = $(this).attr('cname');
            $('#cform #mid').val(mid);
            $('#cform #cname').val(cname);
        });

        $('.del-category').click(function () {
            var mid = $(this).attr('mid');
            tale.alertConfirm({
                title: 'Are you sure to delete this item?',
                then: function () {
                    tale.post({
                        url: '/admin/category/delete',
                        data: { mid: mid },
                        success: function (result) {
                            if (result && result.code == 'success') {
                                tale.alertOkAndReload('Item deleted successfully!');
                            } else {
                                tale.alertError(result.msg || 'Item deletion failed!');
                            }
                        }
                    });
                }
            });
        });
    /*]]>*/
    </script>
</body>

</html>